<template>
    <div id="nursingContent">
        <div id="addAndSearch">
            <div id="search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-input v-model="formInline.search"   @keyup.enter="onSearch()" placeholder="护理内容"></el-input>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div id="formDiv">
            <el-table
                    :data="NursingContentList"
                    border
                    highlight-current-row
                    style="width: 1235px"
            >
                <el-table-column fixed prop="id" label="序号" width="80">
                </el-table-column>
                <el-table-column fixed prop="name" label="名称" width="120">
                </el-table-column>
                <el-table-column fixed prop="price" label="价格(元/次)" width="150">
                </el-table-column>
                <el-table-column fixed prop="service" label="增值服务" width="100">
            </el-table-column>
                <el-table-column fixed prop="status" label="状态" width="100">
                </el-table-column>
                <el-table-column fixed prop="remarks" label="备注" width="514">
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                editButton(scope.row)
              "
                                size="small"
                        >编辑</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="editDialog">
            <el-dialog
                    title="修改护理内容"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center
            >
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="价格">
                            <el-input v-model="form.price"></el-input>
                        </el-form-item>
                        <el-form-item label="增值服务">
                            <el-radio-group v-model="form.service">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-input v-model="form.status"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
          <el-button
                  type="primary"
                  @click="
              centerDialogVisible = false,
              editClick()
            "
          >确 定</el-button
          >
        </span>
            </el-dialog>
        </div>
        <el-row style="float: right;margin: 0">
            <label>当前为第{{this.page.nowpage}}页，共计{{this.page.totalpage}}页</label>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()">上一页</el-button>
                    <el-button type="primary" @click="increase_page()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                              v-model="page.page_input"
                    ></el-input>
                    <el-button type="primary" @click="change_page()">Go!</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import qs from 'qs'
    const axios = require("axios");
    export default {
        mounted() {
            this.getNursingContent("1");
        },
        methods: {
            searchByName(page,search) {
                if(search=="")
                {
                    this.getNursingContent(1);
                    this.page.nowpage=1;
                }
                else
                {
                    axios({
                        method:'post',
                        url:'/api/nursingcontent_page/search_by_name',
                        data:qs.stringify({'page':page,'name':search}),
                    })
                        .then(
                            (res) => {
                                console.log(res);
                                this.NursingContentList = res.data.data.nursing_content_list;
                                this.page.totalpage=res.data.data.total_page;
                            },
                            (res) => {}
                        );
                }

            },
            editButton(row) {
                this.form.id=row.id;
                this.form.number=row.number;
                this.form.name=row.name;
                this.form.service=row.service;
                this.form.price=row.price;
                this.form.level=row.level;
                this.form.status = row.status;
                this.form.remarks = row.remarks;
            },
            onSearch() {
                console.log(this.formInline.search);
                this.searchByName(this.page.nowpage,this.formInline.search)
            },
            resetForm() {
                this.form.id="";
                this.form.number="";
                this.form.name="";
                this.form.service="";
                this.form.price="";
                this.form.level="";
                this.form.status = "";
                this.form.remarks = "";
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {});
            },
            handleCurrentChange(val) {
                /*console.log(val);*/
                this.getNursing(val);
                this.nowpage=val;
            },
            getNursingContent(page) {
                axios({
                    method:'post',
                    url:'/api/nursingcontent_page/getNursingContent',
                    data:qs.stringify({'page':page}),
                }).then(
                    (res) => {
                        console.log(res);
                        this.NursingContentList = res.data.data.nursing_content_list;
                        this.page.totalpage = res.data.data.total_page;
                        /* console.log(this.totalPage); */
                    },
                    (res) => {}
                );
            },
            editClick() {
                const form=this.$data.form
                axios({
                    method:'post',
                    url:'/api/nursingcontent_page/editNursingContent',
                    data:qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            console.log(res)
                            this.getNursingContent(this.page.nowpage);
                            this.resetForm();
                        },
                        (res) => {}
                    );
            },
            increase_page() {
                if(this.page.nowpage<this.page.totalpage) {
                    this.$data.page.nowpage++;
                    if(this.formInline.search=='') {
                        this.getNursingContent(this.page.nowpage);
                    }
                    else{
                        this.searchByName(this.page.nowpage,this.formInline.search);
                    }
                }
            },
            decrease_page() {
                if (this.$data.page.nowpage > 1) {
                    this.$data.page.nowpage--;
                }
                if(this.formInline.search=='') {
                    this.getNursingContent(this.page.nowpage)
                }
                else{
                    this.searchByName(this.page.nowpage,this.formInline.search);
                }
            },
            change_page() {
                let num = parseInt(this.$data.page_input);
                if (isNaN(num)) {
                    alert("请输入正确的数字！");
                    this.$data.page.page_input = '';
                } else if (num <= 0) {
                    alert("请输入正整数！");
                    this.$data.page.page_input = '';
                } else {
                    this.$data.page.page_input = num;
                    if(this.formInline.search=='') {
                        this.getNursingContent(this.page.page_input);
                    }
                    else{
                        this.searchByName(this.page.page_input,this.formInline.search);
                    }
                }
            },
        },

        data() {
            return {
                NursingContentList: [],
                page:{
                    page_input:'',
                    nowpage: 1,
                    totalPage: '',
                },
                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                formInline: {
                    search: "",
                },
                editId: "",
                form: {
                    id:'',
                    number:"",
                    name:"",
                    service:"",
                    price:"",
                    level:"",
                    status:"",
                    remarks: "",
                },
            };
        },
    };
</script>

<style>

    #nursingContent {
        width: 100%;
        height: 100%;
    }
    #nursingContent #formDiv{
        margin-left: 40px;
        margin-right: 40px;
    }
    #nursingContent #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #nursingContent #addAndSearch .el-input {
        width: 200px;
    }
    #nursingContent #addAndSearch #add {
        float:left;
    }
    #nursingContent #addAndSearch #search {
        float: right;
        margin-right: 60px;
    }
    #nursingContent #addAndSearch #search .el-input {
        width: 120px;
    }
    #nursingContent #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }

    /*#nursingContent #formDiv .el-table th,#nursingContent #formDiv .el-table tr,#nursingContent #formDiv .el-table__empty-block,#nursingContent .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

